<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>短信验证码</title>
</head>
<body>
<div>
    <table style="margin: 100px auto">
        <tr>
            <td>手机号：</td>
            <td>
                <input type="text" placeholder="请输入手机号码" name="phone" id="phone" onfocus="getOldMobile(this.value)" onblur="newMobile(this.value)">
            </td>
        </tr>
        <tr>
            <td>验证码：</td>
            <td>
                <input type="text" placeholder="请输入验证码" name="code" id="code" value="" onblur="checkCode()">
                <a href="javascript:void(0)" onclick="sendCode('1')" id="codeButton">云通讯短信平台</a>
                <a href="javascript:void(0)" onclick="sendCode('2')" id="codeButton1">阿里云短信平台</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/layer/layer.js"></script>
<script>
    var wait = 60;
    var oldMobile = '';
    function getOldMobile(val){
        oldMobile = val;
    }

    function newMobile(val){
        if(oldMobile!=val &&$("#code").val()){
            $("#code").val('');
            $('#codeResult').val(0);
            document.getElementById("codeButton").removeAttribute("disabled");
            wait = 0;
        }
    }
    function sendCode(type){
        if ($("#phone").val() == "") {
            layer.msg("手机号码不能为空！");
            $("#phone").focus();
            return;
        };
        if (!$("#phone").val().match(/^1[3|4|5|7|8][0-9]\d{4,8}$/)) {
            layer.msg("手机号码格式不正确！请重新输入！");
            $("#phone").focus();
            return;
        };
        if(type == '1'){
            url = "{:url('Sendmsg/yunTongXun')}"
        }else{
            url = "{:url('Sendmsg/dySms')}"
        }
        $.post(url, {phone : $("#phone").val()
        }, function(data) {
            layer.msg(data.message);
            if(data.status==1) {
                time_send(document.getElementById("codeButton"));
                time_send(document.getElementById("codeButton1"));
            }
        },'json');
    }
    function time_send(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            $("#codeButton").html("获取验证码");
            $('#codeButton').addClass("mui-btn-warning");
            $("#codeButton1").html("获取验证码");
            $('#codeButton1').addClass("mui-btn-warning");
            wait = 60;
        }else{
            o.setAttribute("disabled", true);
            $("#codeButton").html(wait + "s");
            $('#codeButton').removeClass("mui-btn-warning");
            $("#codeButton1").html(wait + "s");
            $('#codeButton1').removeClass("mui-btn-warning");
            wait--;
            setTimeout(function() {
                time_send(o);
            }, 1000);
        }
    };
    function checkCode(){
        var phone = $("#phone").val();
        var code = $("#code").val();
        if (phone == "") {
            layer.msg("手机号码不能为空！");
            $("#phone1").focus();
            return;
        }
        if (!phone.match(/^1[3|4|5|7|8][0-9]\d{4,8}$/)) {
            layer.msg("手机号码格式不正确！请重新输入！");
            $("#phone").focus();
            return;
        }
        if (code == "") {
            layer.msg("短信验证码不能为空！");
            return;
        }
        $.get("{:url('Sendmsg/sendMsgBack')}", {
            phone : phone,
            code : code
        }, function(data) {
            layer.msg(data.message);
            if (data.status == '1') {
                $("#codeButton").attr("disabled", "disabled");
                $("#codeButton1").attr("disabled", "disabled");
            } else {
                // layer.msg("验证码错误");
                return false;
            }

        });
    }
</script>
</html>